<template>
	<noData :showErrorTip="noData">
		<view slot="content" class="content">
			<custom-select class="cus-select" :selectData="examList" :currentValue="currentValue" @change='examChange' :name="keyName"></custom-select>
			
			        <view v-if="!loading">
						<plat title="数据总览">
							<grid class="summary" :column="3" :gridData="examData.summary"></grid>
						</plat>
						<plat title="错误占比">
							<view v-if="showRadarOne">
								<view class="chart-title">- 一级知识点分析 -</view>
								<canvas :canvas-id="radarOne.id" :id="radarOne.id" :style="{'width':radarOne.width+'px','height':radarOne.height+'px'}"></canvas>
								<!-- <canvas :canvas-id="radarOne.id" :id="radarOne.id" :style="{'width':radarOne.width+'px','height':radarOne.height+'px'}"></canvas> -->
							</view>
							<view v-if="showRadarTwo">
								<view class="chart-title">- 二级知识点分析 -</view>
								<canvas :canvas-id="radarTwo.id" :id="radarTwo.id" :style="{'width':radarTwo.width+'px','height':radarTwo.height+'px'}"></canvas>
							</view>
						</plat>
						<plat title="学院分数段数据" v-if="showStack">
							<canvas :canvas-id="stackData.id" :id="stackData.id" :style="{'width':stackData.width+'px','height':stackData.height+'px'}"
							@touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd" @error="error"></canvas>
						</plat>
						<plat title="排行榜" >
							<rank ref="rank" :resetIndex="resetIndex" @getRankData="getRankData" :gradeData="rankData" @lookMore='lookMore'></rank>
						</plat>
					</view>
			<view v-else>
				<image class="centerIM" src="/static/report/loading.gif"></image>
			</view>
		</view>
	</noData>
</template>

<script>
	var canvasRadarOne;
	var canvasRadarTwo;
	var canvasStack;
	// var canvases = {};
	import {
		isEmpty
	} from '@/utils/index';
	import CustomSelect from '../fragments/CustomSelect'
	import Plat from '../fragments/Plat';
	import Grid from '../fragments/Grid';
	import SummaryItem from '../fragments/SummaryItem';
	import Rank from '../fragments/Rank';
	import uCharts from '@/components/u-charts/u-charts';
	import report from '@/mixins/report/index';
	import ReportService from '@/services/report/index';
	const reportService = new ReportService();

	export default {
		mixins: [report],
		components: {
			CustomSelect,
			Plat,
			Grid,
			SummaryItem,
			Rank
		},
		props: {
			parentIndex: {
				type: Number,
				default: 0
			},
			selfIndex: {
				type: Number,
				default: 0
			},
			ascription: 0
		},
		data() {
			return {
				resetIndex:false,
				showSkeleton: true,
				currentValue: '',
				keyName: "paperName",
				noData: true,
				loading:true,
				examData: {},
				examList: [],
				pageNo:1,
				paperId: undefined,
				examId: undefined,
				rankData:[],
				seriesColor: ["#5ea1f8", "#74c1b6", "#f1685d", "#5ea1f8", "#74c1b6"],
				pixelRatio: 1,
				radarOne: {
					id: 'canvasOne',
					width: uni.upx2px(710),
					height: uni.upx2px(700),
					series:[]
					// categories: [],
					// series: [{
					// 	name: '一级知识点',
					// 	data: []
					// }]
				},
				radarTwo: {
					id: 'canvasTwo',
					width: uni.upx2px(710),
					height: uni.upx2px(700),
					series:[]
					// categories: [],
					// series: [{
					// 	name: '二级知识点',
					// 	data: []
					// }]
				},
				stackData: {
					id: 'canvasStack',
					width: uni.upx2px(710),
					height: uni.upx2px(500),
					"categories": [],
					"series": []
				}
			}
		},
		computed: {
			showRadarOne() {
				//&& !isEmpty(this.radarOne.series[0].data)
				return !isEmpty(this.radarOne.series);
			},
			showRadarTwo() {
				//&& !isEmpty(this.radarTwo.series[0].data)
				return !isEmpty(this.radarTwo.series);
			},
			showStack() {
				return !isEmpty(this.examData.scoreData) && !isEmpty(this.examData.scoreData.data);
			},
			showRank() {
				return !isEmpty(this.examData.rank);
			}
			
		},
		watch: {
			parentIndex(newVal) {
				this.getExamList(this.stackData);
			}
		},
		mounted() {
			// 懒加载
			if (this.parentIndex == this.selfIndex) {
				this.getExamList();
			}
		},
		methods: {
			getRankData(type=0,pageNo=1){
				reportService.examData_rank({type,pageNo,examId:this.examId}).then(
					(response) => {
						if (response.success) {
							let index=1
							this.rankData = response.result.list
							// .map(
							// 	s=> {return {...s,rank:index++}}
							// )
						}
					}
				)
			},
			//重置数据,
			resetData() {
				this.examData = {};
				this.stackData.categories = [];
				this.stackData.series = [];
				// this.radarOne.categories = [];
				this.radarOne.series = [];
				// this.radarTwo.categories = [];
				this.radarTwo.series = []
			},
			//排行榜查看更多
			lookMore(type=0) {
				uni.navigateTo({
					url: '/pages/report/rankPage?examId=' + this.examId + '&paperId=' + this.paperId+'&type='+type
				})
			},
			//获取考试下拉列表
			getExamList() {
				if (!isEmpty(this.examList)) {
					return;
				}
				const param = {
					ascription: this.ascription
				};
				reportService.examList(param).then((response) => {
					if (response.success) {
						this.examList = response.result;
						console.log('exanlist',this.examList)
						if (!isEmpty(this.examList)) {
							const curItem = this.examList[0];
							this.currentValue = curItem[this.keyName];
							this.paperId = curItem.paperId;
							this.examId = curItem.id;
							this.getRankData();
							this.loadData();
							this.noData = false;
						} else {
							this.noData = true
							this.loading = true;
						}
						console.log('noData', this.noData);
					} else {
						this.loading = true;
						this.noData = true
						uni.showToast({
							title: response.message,
							icon: 'none',
							duration: 2000
						})
					}
				})
			},
			//请求考试分析数据
			loadData() {
				this.loading = true
				reportService.examData({
					paperId: this.paperId,
					examId: this.examId
				}).then((response) => {
					if (response.success) {
						this.examData = response.result;
						this.handleRadarData(canvasRadarOne, response.result.errorRatio.first, this.radarOne, 'canvasOne');
						this.handleRadarData(canvasRadarTwo, response.result.errorRatio.second, this.radarTwo, 'canvasTwo');
						this.handleStackData(response.result.scoreData);
						this.loading = false
						this.noData = false;
					} else {
						this.noData = true
						uni.showToast({
							title: response.message,
							icon: 'none',
							duration: 2000
						})
					}
				}).then(() => {
					this.showSkeleton = false;
				})
			},
			//模考大赛改变。重新请求数据
			examChange(item) {
				this.paperId = item.paperId;
				this.examId = item.id;
				this.currentValue = item.paperName;
				this.resetData();
				this.loadData();
				if(this.$refs.rank!=null||this.$refs.rank!=undefined){
					this.$refs.rank.tabChange(0);
				}
				//this.resetIndex = true
			},
			//处理堆叠柱状图数据
			handleStackData(stackData) {
				if (isEmpty(stackData.data)) {
					return;
				}
				if (isEmpty(stackData.section)) {
					return;
				}
				stackData.data.forEach((item, index) => {
					const academy = isEmpty(item.academy)?'':item.academy;
					this.stackData.categories.push(academy);
				});
				this.stackData.series = [];
				stackData.section.forEach((item, index) => {
					if(index>1){
						let seriesItem = {
							"name": item,
							"color": this.seriesColor[index],
							"data": []
						};
						stackData.data.forEach((dataItem, subIndex) => {
							seriesItem.data.push(dataItem.values[index]);
						});
						this.stackData.series.push(seriesItem);
					}
				})
				console.log('stackData',this.stackData);
				this.showColumnStack(this.stackData);
			},
			showColumnStack(chartData) {
				canvasStack = new uCharts({
					$this: this,
					canvasId: chartData.id,
					type: 'column',
					legend: true,
					fontSize: 10,
					background: '#FFFFFF',
					pixelRatio: this.pixelRatio,
					animation: true,
					categories: chartData.categories,
					series: chartData.series,
					enableScroll: true,
					xAxis: {
						disableGrid: true,
						itemCount: 4,
						scrollShow: true
					},
					yAxis: {
						disableGrid: true,
						disabled:true
					},
					dataLabel: false,
					width: chartData.width * this.pixelRatio,
					height: chartData.height * this.pixelRatio,
					extra: {
						column: {
							type: 'stack',
						}
					}
				});

			},
			// touchColumn(e) {
			// 	canvasStack.showToolTip(e, {
			// 		format: function(item, category) {
			// 			return category + ' ' + item.name + ':' + item.data
			// 		}
			// 	});
			// },
			
			touchStart(e) {
				canvasStack.showToolTip(e, {
					format: function(item, category) {
						return category + ' ' + item.name + ':' + item.data
					}
				});
				canvasStack.scrollStart(e);
			},
			touchMove(e) {
				canvasStack.scroll(e);
			},
			touchEnd(e) {
				canvasStack.scrollEnd(e);
			},
			error(e) {
				console.log(e)
			}

		}

	}
</script>


<style lang="scss" scoped>
	.error {
		width: 100%;
		height: 100%;
		background-color: #f1f1f1;
		text-align: center;
		position: absolute;
		bottom: 0;
		top: 0;
	
		&-text {
			font-size: 28upx;
			color: #999;
			padding-top: 240upx;
		}
	
		&-icon {
			width: 145upx;
			margin-top: 60upx;
		}
	
		&-btn {
			width: 320upx;
			height: 80upx;
			line-height: 80upx;
			color: #fff;
			font-size: 28upx;
			background-color: #5ea1f8;
			border-radius: 8upx;
			margin: 80upx auto 0;
		}
	}
	.content {
		background-color: #ffffff;
		padding: 0 10upx;
	}

	.cus-select {
		display: inline-block;
		width: 100%;
		height: 80upx;
		line-height: 80upx;
		font-size: 30upx;
		color: #333333;
		background-color: #ffffff;
		box-shadow: 0 4upx 20upx 0 rgba(153, 153, 153, 0.15);
		border-radius: 8upx;
		border: solid 2upx #f7f7f7;
		margin: 40upx 0;
	}

	.summary {
		background-image: url(/static/report/summary_bg.jpg);
		background-size: 100% 100%;
	}

	.chart {
		width: 710upx;
		height: 500upx;

		&-title {
			text-align: center;
			font-size: 30upx;
			color: #5ea1f8;
			font-weight: 600;
			line-height: 110upx;
		}
	}

	.ec-canvas {
		width: 100%;
		height: 340upx;
	}
	.centerIM{
		text-align: center;
		position: absolute;
		top: 20%;
		left: 50%;
		transform: translate(-50%,-20%);
		width: 80upx;
		height: 80upx;
	}
</style>
